<!--
 * @FilePath: HomeView.vue
 * @Author: jack
 * @Date: 2024-05-18 08:53:38
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-05-22 16:46:01
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
    <div class="home-view-Box" ref="homeRef">
        <HeaderTwo ref="header" :screenNotice="dataInfo.screen_notice" :screenTitle="dataInfo.screen_title">
        </HeaderTwo>
        <div class="screenBox">
            <div class="screenLeft" :style="{ height: screenBoxHeight + 'px' }">
                <div class="leftTop" ref="leftTopRef">
                    <div class="childOne">
                        <div class="title">
                            {{ dataInfo.titleOne }}
                        </div>
                        <div class="flexItem">
                            <div class="item" :class="(index + 1) % 2 == 0 ? 'item2' : ''" v-show="item.id"
                                v-for="(item, index) in dataInfo.schoolHonors" :key="index">
                                <img v-if="(index + 1) % 2 == 1" src="../assets/image/rongyu1.png" alt="">
                                <img v-if="(index + 1) % 2 == 0" src="../assets/image/rongyu2.png" alt="">
                                <CarouselText :words="item.content" :isEditor="true"></CarouselText>
                            </div>
                        </div>
                    </div>
                    <div class="childTwo">
                        <div class="title">
                            {{ dataInfo.titleTwo }}
                        </div>
                        <div class="flexItem"> <!-- 添加环形布局容器类 -->
                            <!-- 假设dataInfo.teacherDevelop为需要展示的数据数组 -->
                            <div class="ring-layout">
                                <div v-show="item.id" v-for="(item, index) in dataInfo.teacherDevelop.dataList"
                                    :key="index" class="ring-item">
                                    <div class="item-content">
                                        <SvgIcon :icon-class="item.icon" color="#1F4E6C"
                                            style="width: 100%;height:100%;">
                                        </SvgIcon>
                                        <div class="infoBox">
                                            <div>{{ item.level_num }}</div>
                                            <div>{{ item.level_name }}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="cirles">
                                    <div>{{ dataInfo.teacherDevelop.count }}</div>
                                    <div>{{ dataInfo.teacherDevelop.name }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="childThird" ref="childThird" :style="{ height: childThirdHeight + 'px' }">
                    <div class="title">
                        {{ dataInfo.titleThird }}
                    </div>
                    <div class="flexItem">
                        <div class="listItem" ref="listItemRef">
                            <div class="items" v-show="item.id" v-for="(item, index) in dataInfo.teacherTeam"
                                :key="index">
                                <div>{{ item.label }}</div>
                                <div class="num">{{ item.value }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="screenCenter">
                <!-- <div class="centerBot" > -->
                <div class="centerTop" :style="{ height: centerTopHeight + 'px' }">
                    <div class="childiframe" ref="childiframeRef">
                        <div style="width: 100%;height:100%;position: relative;">
                            <iframe v-show="dataInfo.carouselList.length > 0 && !isIframeVideo" ref="iframe"
                                :style="{ transform: `translate(-50%, -50%) scale(${iframeScaleWid < iframeScaleHet ? iframeScaleWid : iframeScaleHet})` }"
                                :src="dataInfo.carouselList.length > 0 ? dataInfo.carouselList[0].screen_link : ''"></iframe>
                            <video style="width:100%;height:100%;" ref="fullVidioRef" v-if="isIframeVideo" controls
                                autoplay :disablePictureInPicture="true" :src="fullVidio.local_video_show">
                            </video>
                        </div>
                    </div>
                </div>
                <div class="centerBot" ref="centerBotRef">
                    <img class="centerBg" src="../assets/image/dibu.png" alt="">
                    <carousel-3d ref="carousel" v-if="dataInfo.carouselList.length > 0" :border=0 :display="5"
                        :perspective="80" @before-slide-change="onSlideChange" @onMainSlideClick="onMainSlideClick"
                        :width="swiperWidth" :height="props.isRem && !$util.isMobile() ? $util.fontSize(246) : 246"
                        controlsVisible :controlsHeight="props.isRem && !$util.isMobile() ? $util.fontSize(246) : 246"
                        :disable3d="false" :loop="true" :space="$util.fontSize(286)" :startIndex="carouselActive"
                        :clickable="false">
                        <slide @click.stop="goSlideIndex(index)" v-for="(item, index) in dataInfo.carouselList"
                            :index="index" :key="index">
                            <div class="slideItem">
                                <img v-if="item.local_pic_show" :src="item.local_pic_show" />
                                <div v-if="item.screen_name" class="name">{{ item.screen_name }}</div>
                            </div>
                        </slide>
                    </carousel-3d>
                </div>
            </div>
            <div class="screenRight" ref="screenRightRef" :style="{ height: screenBoxHeight + 'px' }">
                <div class="rightTop" ref="rightTopRef">
                    <div class="rtChildOne">
                        <div class="title">
                            {{ dataInfo.titleFour }}
                        </div>
                        <div class="flexItem">
                            <div class="flexBox" ref="rtChildOneRef">
                                <!-- 如果是多张图片，就选用轮播 -->
                                <swiper ref="swiperRef" @click="lookView"
                                    v-if="Number(dataInfo.currentCourse.type) == 1" @swiper="onSwiper"
                                    :slidesPerView="1" :spaceBetween="0" :loop="true" :centeredSlides="true"
                                    :pagination="{ clickable: true }"
                                    :autoplay="{ delay: 2500, disableOnInteraction: false }" :navigation="false"
                                    :modules="modules" :observer="true" :observeParents="true" style="height:100%;">
                                    <swiper-slide v-for="(item, index) in dataInfo.currentCourse.local_pic_show"
                                        :key="index">
                                        <img :src="item" style="width:100%;height:100%;display: inline-block;" alt="" />
                                    </swiper-slide>
                                </swiper>
                                <!-- 如果是视频类型 -->
                                <div class="samllVideo" v-if="Number(dataInfo.currentCourse.type) == 2">
                                    <video ref="samllVideoRef" class="video" :class="isIframeVideo ? 'noMuted' : ''"
                                        v-if="Number(dataInfo.currentCourse.type) == 2"
                                        style="width:100%;height:100%;object-fit: fill;" autoplay playsinline="false"
                                        :disablePictureInPicture="true" :muted="isMuted" controls
                                        controlslist="nodownload noplaybackrate noremoteplayback nofullscreen"
                                        :src="dataInfo.currentCourse.local_video_show"
                                        @volumechange="handleVolumeChange">
                                    </video>
                                </div>
                                <!-- 如果是外部链接地址 -->
                                <iframe v-if="Number(dataInfo.currentCourse.type) == 3" style="width:100%;height:100%;"
                                    :src="dataInfo.currentCourse.link"></iframe>
                                <div class="fullIcon">
                                    <!-- 点击下拉选择 -->
                                    <img @click="putAway" src="../assets/image/Away.png" alt="">
                                    <!-- 点击全屏 -->
                                    <img @click="lookView" src="../assets/image/suofang.png" alt="">
                                </div>
                                <transition enter-active-class="animate__animated animate__fadeInLeft"
                                    leave-active-class="animate__animated animate__fadeOutLeft" :duration="500">
                                    <div class="itemList" v-if="showItem"
                                        :style="{ height: rtChildOneItemHeight + 'px' }">
                                        <div v-for="(item, index) in dataInfo.schoolCourse" :key="index"
                                            @click="selectCurrentItem(item, index)">{{ item.name }}
                                        </div>
                                    </div>
                                </transition>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="rightBot" :style="{ height: rightBotHeight + 'px' }">
                    <div class="rtChildTwo">
                        <div class="title">
                            {{ dataInfo.titleFive }}
                        </div>
                        <div class="flexItem">
                            <div class="tipImg"></div>
                            <div class="listItem"
                                v-for="(item, index) in dataInfo.schoolAppear.length > 2 ? dataInfo.schoolAppear.slice(0, 4) : dataInfo.schoolAppear"
                                :key="index">
                                <div class="itemName">{{ item.name }}</div>
                                <div class="itemImg" v-if="item.id" @click="lookItem(item)">
                                    <img :src="item.local_cover_show" alt="">
                                    <div class="fullIcon"></div>
                                </div>
                            </div>
                            <swiper ref="rightSwiperRef" style="width:100%;height:100%;"
                                v-if="dataInfo.schoolAppear.length > 4 && rightSwiperHeight > 0" :slidesPerView="1"
                                :spaceBetween="0" :loop="false" :centeredSlides="true" :pagination="false"
                                :autoplay="false" :navigation="customNavigation" :modules="modules" :observer="true"
                                :observeParents="true">
                                <swiper-slide
                                    v-for="(item, index) in $util.divideArrayIntoEqualParts(dataInfo.schoolAppear, rightSwiperHeight)"
                                    :key="index">
                                    <div class="listItem" v-for="(items, indexs) in item" :key="items.id">
                                        <div class="itemName">{{ item.name }}</div>
                                        <div class="itemImg" v-if="item.id" @click="lookItem(item)">
                                            <img :src="item.local_cover_show" alt="">
                                            <div class="fullIcon"></div>
                                        </div>
                                    </div>
                                </swiper-slide>
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                            </swiper>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 预览图片弹窗 -->
        <transition enter-active-class="animate__animated animate__fadeIn"
            leave-active-class="animate__animated animate__fadeOut" :duration="1000">
            <SwiperModify v-if="dialogSwiperVisible" :swiperList="swiperList" @CloseDialog="CloseSwiperDialog">
            </SwiperModify>
        </transition>
        <FooterTwo ref="footer">
        </FooterTwo>
    </div>
</template>
<script setup lang="ts">
import '../assets/css/index.scss'
import { reactive, ref, onMounted, nextTick, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import HeaderTwo from '../components/Common/HeaderTwo.vue'
import FooterTwo from '../components/Common/FooterTwo.vue'
import RingChart from '../components/Common/RingChart.vue'
import PyramidChart from '../components/Common/PyramidChart.vue'
import SwiperModify from '../components/Common/SwiperModify.vue'
import $util from '../util/util'
import $rem from '../util/rem'
import { Swiper, SwiperSlide } from 'swiper/vue' // swiper 所需组件
import { Autoplay, Navigation, A11y } from 'swiper'// 分页器
import 'swiper/css'
import 'swiper/css/navigation'
import { getToken } from '../components/Api/login'
import { getScreenConfig, getScreenSettingList } from '../components/Api/index'
interface PropsType {
    isRem?: boolean
    configData?: any
}
const props = withDefaults(defineProps<PropsType>(), {
    isRem: true,
    configData: []
})
const emit = defineEmits<EmitType>()
interface EmitType {
}
const modules = [Autoplay, Navigation, A11y]
const onSwiper = (swiper: any) => {
    nextTick(() => {
        swiper.updateSlides();
        swiper.slideTo(1, 0, false);
    })
}
const customNavigation = ref({
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
})
const isVideo1Playing = ref<boolean>(false)
const screenBoxHeight = ref<number>(0)
const header = ref<any>(null)
const footer = ref<any>(null)
const dialogSwiperVisible = ref<boolean>(false)  // 图片轮播弹窗
// 关闭图片预览弹窗
const CloseSwiperDialog = () => {
    dialogSwiperVisible.value = false
}
// 开启图片预览弹窗
const fullVidio = ref<any>({
    type: '',
})
const fullVidioRef = ref<any>(null) //大屏幕的video的ref
const samllVideoRef = ref<any>(null) //小屏幕的video的ref
const lookItem = (item: any) => {
    if (Number(item.type) === 1) {
        // 如果当前选择的数据是图片类型
        swiperList.value = item.local_pic_show
        dialogSwiperVisible.value = true
    } else if (Number(item.type) === 2) {
        // 视频
        isIframeVideo.value = true
        isMuted.value = true
        fullVidio.value = item
    } else {
        isIframeVideo.value = false
        // 链接地址
        iframe.value.contentWindow.location.replace(item.link)
    }
}
const homeRef = ref<any>(null) // 串口总大小
const width = 1920
const height = 1080

/* 根据浏览器大小推断缩放比例 */
const getScale = () => {
    let ww = window.innerWidth / 1920
    let wh = window.innerHeight / 1080
    console.log(window.innerWidth, window.innerHeight)
    return ww < wh ? ww : wh
}
/* 浏览器监听 resize 事件 */
const resizeScreen = () => {
    if (homeRef.value) {
        homeRef.value.style.transform = `translate(-50%, -50%) scale(${getScale()}) `;
    }
};
const leftTopRef = ref<any>(null) // 左侧上部分的高度
const childThirdHeight = ref<number>(0)  // 左侧教师团队的容器高度
const childThird = ref<any>(null)
const pyramidChartHeight = ref<number>(0) // 左侧金字塔模块的容器高度
const listItemRef = ref<any>(null)
const centerBotRef = ref<any>(null) // 中间上部分轮播图的容器高度
const centerTopHeight = ref<number>(0)  // 中间大屏呈现容器高度
const childiframeRef = ref<any>(null)
const iframeScaleWid = ref<number>(1) //iframe的缩放比例
const iframeScaleHet = ref<number>(1) //iframe的缩放比例
const rightTopRef = ref<any>(null) // 右侧侧上部分的高度
const rightBotHeight = ref<number>(0)  // 右侧校园风貌容器高度
const rtChildOneRef = ref<any>(null) // 右侧内容区域dom
const rtChildOneItemHeight = ref<number>(0) // 右侧内容区域下拉选择视频列表的高度
const showItem = ref<boolean>(false) // 是否展开
const rightSwiperHeight = ref<number>(-11)
const getHeight = async () => {
    screenBoxHeight.value = homeRef.value.clientHeight - header.value.$el.clientHeight - footer.value.$el.clientHeight
    // 计算左边教师团队的容器高度
    childThirdHeight.value = screenBoxHeight.value - leftTopRef.value.clientHeight
    // 计算右侧金字塔的容器的适配高度
    pyramidChartHeight.value = childThirdHeight.value - $util.fontSize(40) - listItemRef.value.clientHeight
    // 计算 中间大屏呈现容器高度
    centerTopHeight.value = screenBoxHeight.value - centerBotRef.value.clientHeight - $util.fontSize(24)
    // 计算iframe的缩放比例 哪个比例小就去那个比例 （自适应最合适的适配方案）
    iframeScaleWid.value = childiframeRef.value.clientWidth / 1920
    iframeScaleHet.value = (centerTopHeight.value - $util.fontSize(54)) / 1080
    // 计算右边校园风貌的的容器高度
    rightBotHeight.value = screenBoxHeight.value - rightTopRef.value.clientHeight
    // 计算右侧内容区域下拉选择视频列表的高度
    rtChildOneItemHeight.value = rtChildOneRef.value.clientHeight - $util.fontSize(40)
    // 计算右边校园风貌轮播的高度
    rightSwiperHeight.value = Math.round((Number(rightBotHeight.value) - $util.fontSize(92)) / $util.fontSize(145)) - 1
}
const swiperWidth = ref<number>(282)
const carousel = ref<any>(null)
const carouselActive = ref<number>(0)
const iframeLink = ref<string>('') // 嵌入的屏幕链接地址
const iframe = ref<any>(null)
const isIframeVideo = ref<boolean>(false)   //是否嵌入视频还是链接
const onSlideChange = (temp: any) => {
    isIframeVideo.value = false
    carouselActive.value = temp
    if (!dataInfo.carouselList[temp].screen_link) return
    iframe.value.contentWindow.location.replace(dataInfo.carouselList[temp].screen_link)
}
const goSlideIndex = (index: number) => {
    isIframeVideo.value = false
    if (index > dataInfo.carouselList.length - 1 || 0 > dataInfo.carouselList.length - 1) {
        return;
    }
    carousel.value.goFar(index);
    if (index === carouselActive.value && dataInfo.carouselList[index].screen_link) {
        iframe.value.contentWindow.location.replace(dataInfo.carouselList[index].screen_link)
    }
}
const onMainSlideClick = (temp: any) => {
    isIframeVideo.value = false
    carouselActive.value = temp
    iframeLink.value = dataInfo.carouselList[temp].screen_link
}
const allowSlide = ref(true)
const onSlide = () => {
    if (!allowSlide.value) {
        // 如果不允许滑动，则不做任何操作
        return;
    }
    // 重置标志，禁止在下一次滑动事件触发前进行滑动
    allowSlide.value = false;
    setTimeout(() => {
        // 在一定时间后（例如500毫秒）允许滑动
        allowSlide.value = true;
    }, 500);
}
// 获取Token
const getTokenInfo = async () => {
    if (!window.sessionStorage.getItem('ScreenToken') || window.sessionStorage.getItem('ScreenToken') === null) {
        const res: any = await getToken()
        if (res.code !== 1) {
            return;
        }
        sessionStorage.setItem("ScreenToken", res.data.accessToken)
        sessionStorage.setItem("tokenkey", res.data.keystr)
    }
}
const dataInfo = reactive<any>({
    // 公告
    screen_notice: '',
    screen_title: '',
    // 学校荣誉列表
    titleOne: '',
    schoolHonors: [],
    // 师资建设
    titleTwo: '',
    teacherDevelop: {
        name: '',
        count: '',
        dataList: []
    },
    // 教师团队
    titleThird: '',
    teacherTeam: [],
    // 创校历程
    titleFour: '',
    schoolCourse: [],
    currentCourse: {},
    // 校园风貌
    titleFive: '',
    schoolAppear: [],
    // 数据大屏
    carouselList: [],
})
// 获取大屏配置
const getConfig = async () => {
    const res: any = await getScreenConfig()
    if (res.code !== 1) return ElMessage.error(res.message)
    setData(res.data)
}
const setData = (data: any) => {
    if (data && data.length > 0) {
        data.forEach((item: any) => {
            if (Number(item.type_id) === 1) {
                //  其他配置 大屏名字和公告
                dataInfo.screen_notice = item.content ? item.content.notice : ''
                dataInfo.screen_title = item.content ? item.content.title : ''
            } else if (Number(item.type_id) === 2) {
                // 学校荣誉
                dataInfo.titleOne = item.name
                if (props.isRem) {
                    dataInfo.schoolHonors = item.content && item.content.length > 0 ? item.content : []
                } else {
                    dataInfo.schoolHonors = item.content && item.content.length > 0 && item.content[0].id ? item.content : []
                }
            } else if (Number(item.type_id) === 3) {
                // 师资建设
                dataInfo.titleTwo = item.name
                dataInfo.teacherDevelop.name = item.content.name
                dataInfo.teacherDevelop.count = item.content.count
                if (props.isRem) {
                    dataInfo.teacherDevelop.dataList = item.content.dataList && item.content.dataList.length > 0 ? item.content.dataList : []
                } else {
                    dataInfo.teacherDevelop.dataList = item.content.dataList && item.content.dataList.length > 0 && item.content.dataList[0].id ? item.content.dataList : []
                }
            } else if (Number(item.type_id) === 4) {
                // 教师团队
                dataInfo.titleThird = item.name
                // dataInfo.teacherTeam = item.content ? item.content : []
                if (props.isRem) {
                    dataInfo.teacherTeam = item.content && item.content.length > 0 ? item.content : []
                } else {
                    dataInfo.teacherTeam = item.content && item.content.length > 0 && item.content[0].id ? item.content.filter((item: any) => item.id) : []
                }
            } else if (Number(item.type_id) === 5) {
                // 创校历程
                dataInfo.titleFour = item.name
                dataInfo.schoolCourse = item.content && item.content.length > 0 ? item.content : []
                // 默认第一次进去显示第一条数据
                dataInfo.currentCourse = dataInfo.schoolCourse.length > 0 ? dataInfo.schoolCourse[selectCurrentIndex.value] : {}
            } else if (Number(item.type_id) === 6) {
                // 校园风貌
                dataInfo.titleFive = item.name
                if (props.isRem) {
                    dataInfo.schoolAppear = item.content && item.content.length > 0 ? item.content : []
                } else {
                    dataInfo.schoolAppear = item.content && item.content.length > 0 && item.content[0].id ? item.content.filter((item: any) => item.id) : []
                }
                console.log(dataInfo.schoolAppear, 'kkkkkkkkkkkkkkkkk')
            } else if (Number(item.type_id) === 7) {
                // 数据大屏
                dataInfo.carouselList = item.content && item.content.length > 0 ? item.content : []
                // 如果数据不够五条
                let num = 0
                if (dataInfo.carouselList.length < 5) {
                    num = 5 - dataInfo.carouselList.length
                }
                for (let i = 0; i < num; i++) {
                    dataInfo.carouselList.push({
                        screen_name: '',
                        screen_link: '',
                        local_pic_show: '',
                    })
                }
            }
        })
    }
}
// 图片集合预览的图片数据
const swiperList = ref<any>([])
// 点击全屏
const isMuted = ref<boolean>(true)
const lookView = () => {
    if (showItem.value) {
        showItem.value = false
    }
    if (Number(dataInfo.currentCourse.type) === 1) {
        // 如果当前选择的数据是图片类型
        swiperList.value = dataInfo.currentCourse.local_pic_show
        dialogSwiperVisible.value = true
    } else if (Number(dataInfo.currentCourse.type) === 2) {
        // 视频
        isIframeVideo.value = true
        fullVidio.value = dataInfo.currentCourse
        isMuted.value = true
        nextTick(() => {
            if (fullVidioRef.value) {
                if (fullVidioRef.value.currentTime !== samllVideoRef.value.currentTime) {
                    fullVidioRef.value.currentTime = samllVideoRef.value.currentTime
                    fullVidioRef.value.play()
                }
            }
        })
    } else {
        // 链接地址
        isIframeVideo.value = false
        iframe.value.contentWindow.location.replace(dataInfo.currentCourse.link)
    }
}
// 点击出现下拉选择
const putAway = () => {
    showItem.value = !showItem.value
}
// 点击选择下拉数据
const swiperRef = ref<any>(null)
const selectCurrentIndex = ref<number>(0)
const selectCurrentItem = (item: any, index: number) => {
    selectCurrentIndex.value = index
    dataInfo.currentCourse = item
    showItem.value = !showItem.value
}
watch(
    () => props.configData,
    async (newValue, oldValue) => {
        await setData(JSON.parse(JSON.stringify(props.configData)))
    },
    { deep: true, immediate: true, }
)
const handleVolumeChange = () => {
    isMuted.value = samllVideoRef.value.muted
}
// 计算环形子元素的transform样式 做到均匀分布
const getRingItemStyle = (index: number) => {
    // const total = dataInfo.teacherDevelop.length;  /* 子元素总数 */
    // const angle = (360 / total) * index;          /* 每个子元素的角度 */
    // const radius = 74;                            /* 环形半径（可调整） */
    // return {
    //     transform: `
    //         rotate(${angle}deg) 
    //         translateY(-${radius}px) 
    //         rotate(-${angle}deg)
    //     `
    // };
};
onMounted(async () => {
    // if (props.isRem && !$util.isMobile()) {
    //     $rem.setRem()
    // }
    if (props.isRem) {
        $rem.setRem()
        await getTokenInfo()
        await getConfig()
    }
    await getHeight()
    // if ($util.isMobile()) {
    //     resizeScreen()
    //     // 初始化时为外层盒子加上缩放属性，防止刷新界面时就已经缩放
    //     if (homeRef.value) {
    //         homeRef.value.style = `position: absolute;top: 50%;left: 50%; margin: auto;transform-origin: center center;width:${width}px;height:${height}px;transform:translate(-50%, -50%) scale(${getScale()})`
    //     }
    //     // 如果是手机端或者平板
    // }
    window.addEventListener("resize", () => {
        // if (props.isRem && !$util.isMobile()) {
        //     $rem.setRem()
        // }
        // if ($util.isMobile()) {
        //     resizeScreen()
        // }
        if (props.isRem) {
            $rem.setRem()
        }
        getHeight()
    });
})
defineExpose({ getHeight })
</script>
<style lang="scss" scoped></style>
